<template>
  <div class="me-container">
    <div class="title">个人中心</div>
    <div class="img-box">
      <div class="tob-box" @click="login">
        <img v-if="islogin" :src="userData.student_img" alt="" srcset="" />
        <img v-else src="../../assets/images/2头像@2x.png" alt="" srcset="" />

        <div class="name">{{ userData.name }}</div>
      </div>
      <div class="bottom-box">
        <div class="item" :key="index" v-for="(item, index) in list">
          {{ item.text }}
          <span @click="golike(index)">{{ item.num }}</span>
        </div>
      </div>
    </div>
    <div class="btn-box">
      <div class="btn">
        <van-button
          @click="gomegoolist(1)"
          :icon="require('@/assets/images/4用户账户@2x.png')"
          ><template #default>
            我发布的
            <img src="@/assets/images/3查看详情@2x.png" />
          </template>
        </van-button>
      </div>
      <div class="btn">
        <van-button
          @click="gomegoolist(2)"
          :icon="require('@/assets/images/4所属部门@2x.png')"
          ><template #default>
            我租凭的
            <img src="@/assets/images/3查看详情@2x.png" />
          </template>
        </van-button>
      </div>
      <div class="btn">
        <van-button
          :icon="require('@/assets/images/4修改密码@2x.png')"
          @click="changepsd"
          ><template #default>
            修改密码
            <img src="@/assets/images/3查看详情@2x.png" />
          </template>
        </van-button>
      </div>
    </div>

    <div class="outlogin" v-if="islogin">
      <div class="btn">
        <van-button @click="signOut"
          ><template #default> 退出登录 </template>
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getLikenum, getCollectnum } from "@/api/interchangeable";
export default {
  name: "Me",
  data() {
    return {
      userData: {
        name: "未登录",
      },
      islogin: false,
      list: [
        {
          text: "喜欢",
          num: 0,
        },
        {
          text: "收藏",
          num: 0,
        },
      ],
    };
  },
  beforeCreate() {},
  created() {},
  mounted() {
    this.userData = JSON.parse(localStorage.getItem("userData"));
    if (this.userData) {
      this.init();
    }
  },
  methods: {
    login() {
      this.$router.push("/login");
    },
    init() {
      this.islogin = true;
      this.getLikenum();
      this.getCollectnum();
    },
    getLikenum() {
      getLikenum({
        user_id: this.userData.id,
      }).then((res) => {
        this.list[0].num = res.data;
      });
    },
    getCollectnum() {
      getCollectnum({
        user_id: this.userData.id,
      }).then((res) => {
        this.list[1].num = res.data;
      });
    },
    gomegoolist(type) {
      if (type == 1) {
        this.$router.push({ path: "megoodslist", query: { type: type } });
      } else {
        this.$router.push({ path: "megoodslist2", query: { type: type } });
      }
    },
    golike(val) {
      if (val == 1) {
        this.$router.push({ path: "megoodslist4", query: { type: 4 } });
      } else {
        this.$router.push({ path: "megoodslist3", query: { type: 3 } });
      }
    },
    changepsd() {
      this.$router.push("/changepsd");
    },
    signOut() {
      this.$Dialog
        .confirm({
          title: "提示",
          message: "确认退出登录",
        })
        .then(() => {
          localStorage.removeItem("userData");
          this.islogin = false;
          this.list = [
            {
              text: "喜欢",
              num: 0,
            },
            {
              text: "收藏",
              num: 0,
            },
          ];
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
